<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PMP备考</title>
    <script src="./public//js//jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .layout {
        display: flex;
      }
      .sidebar {
        width: 20%;
        padding: 20px 30px;
        font-size: 15px;
      }
      .topbar{
        display: none;
      }
      .sidebar a {
        line-height: 40px;
        display: inline-block;
        text-decoration: none;
      }
      .main {
        flex: 1;
        overflow: hidden;
        height: 100vh;
      }

      @media only screen and (min-width: 320px) and (max-width: 479px){
        .layout{
          display:unset ;
        }
        .sidebar{
          width: 100%;
          padding: unset;
          position: fixed;
          left: 0;
          top: 0;
          background: white;
        }
        .sidebar .topbar{
          display: block;
          padding-left: 60px;
          height: 60px;
          width: 100%;
          background: #337ab7;
          color: white;
          text-align: center;
          line-height: 60px;
          font-size: 30px;
        }
        .sidebar .topbar img{
          float: right;
          height: 60px;
          line-height: 60px;
        }
        .sidebar a {
          display: inline-block;
          width: 100%;
          height: 50px;
          line-height: 50px;
          padding-left: 30px;
          border-bottom: 1px solid #eee;
          color: black;
        }
        .main{
          height: calc(100vh - 60px);
          padding-top: 60px;
        }
        #navbar{
          display: none;
        }
      }
      .active a{
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="sidebar">
        <div class="topbar" onclick="scaling()">
         PMP备考
         <img src="./public//images/scaling.png" alt="">
        </div>
        <div id="navbar" >
          <div onclick="setActtive(this)"> 
            <a href="./pages/chapter4/index.html"    target="my-iframe"
            >项目整合管理</a>
          </div>
          <div onclick="setActtive(this)"> 
            <a href="./pages/chapter5/index.html"  target="my-iframe"
            >项目范围管理</a
          >
          </div>
        </div>

      </div>
      <div class="main" id="context">
        <iframe
          id="main"
          name="my-iframe"
          src="./pages/chapter4/index.html"
          style="min-height: 300px; width: 100%; height: 100%"
          frameborder="0"
        ></iframe>
      </div>
    </div>

    <script>
      // 计算页面的实际高度，iframe自适应会用到
      function calcPageHeight(doc) {
        var cHeight = Math.max(
          doc.body.clientHeight,
          doc.documentElement.clientHeight
        )
        var sHeight = Math.max(
          doc.body.scrollHeight,
          doc.documentElement.scrollHeight
        )
        var height = Math.max(cHeight, sHeight)
        return height
      }
      //根据ID获取iframe对象
      var ifr = document.getElementById('main')
      //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
      ifr.style.height = '0px'
      var iDoc = ifr.contentDocument || ifr.document
      var height = calcPageHeight(document)
      ifr.style.height = height + 10 + 'px'
    </script>

    <script>
      function scaling(){
        $("#navbar").slideToggle()
      }
      function setActtive(current){
        $(current).addClass("active")
        $(current).siblings().removeClass("active")
        $("#navbar").hide()
      }
    </script>
  </body>
</html>
